<template>
  <div class="role">
    <el-card shadow="never">
      <el-form label-width="70px" :inline="true">
        <el-form-item label="员工姓名">
          <el-input v-model="paramFrom.username" size="mini" placeholder="请输入员工姓名" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="mini" @click="chaBTn">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 20px;">
      <el-row type="flex" justify="end" style="margin-bottom: 15px;">
        <!--        <el-button type="primary" size="mini" @click="Phone()">消息通知</el-button>-->
        <el-button type="primary" size="mini" @click="btnOK">添加员工</el-button>
      </el-row>
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column prop="username" align="center" label="员工姓名" />
        <el-table-column prop="sex" align="center" label="员工性别">
          <template v-slot="{ row }">
            <span v-if="row.sex === 1"> 男</span>
            <span v-if="row.sex === 2"> 女</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="username"
          align="center"
          label="账号"
        /> -->
        <el-table-column prop="phone" align="center" label="手机号" width="120px" />
        <el-table-column prop="status" align="center" label="账号状态">
          <template v-slot="{ row }">
            <span v-if="row.status === 0">禁用</span>
            <span v-if="row.status === 1">启用</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" align="center" width="160px" label="操作时间" />
        <el-table-column prop="department" align="center" label="所属部门">
          <template v-slot="{ row }">
            <span v-if="row.department === 1">财务</span>
            <span v-if="row.department === 2">客服</span>
            <span v-if="row.department === 3">人事</span>
            <span v-if="row.department === 4">风控</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="160px">
          <template v-slot="{ row }">
            <el-button type="text" @click="editBtn(row)">编辑</el-button>
            <el-button v-if="row.status === 0" type="text" @click="qiBtn(row)">启用</el-button>
            <el-button v-if="row.status === 1" type="text" @click="qinBtn(row)">禁用</el-button>
            <el-button type="text" @click="delBtn(row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <paging :page-size="paramFrom.pageSize" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
      <staffadd ref="staffadd" :currid="currid" :dialog-visible.sync="dialogVisible" @getStaffList="getStaffPageLIst" />
      <!-- 删除 和 修改的对话框 -->
      <el-dialog title="删除账号" :visible="showVisible" width="30%" :before-close="handleClose">
        <div style="text-align: center;">
          <span style="font-size: 16px;">你确定要删除这个账号吗</span>
          <div style="font-size: 16px;">账号: {{ usernames }}</div>
        </div>

        <el-row type="flex" justify="center" style="margin-top: 20px;">
          <el-button size="mini" @click="handleClose">取 消</el-button>
          <el-button size="mini" type="primary" @click="delBtnOK">确 定</el-button>
        </el-row>
      </el-dialog>
      <!--      <el-dialog-->
      <!--          title="消息通知"-->
      <!--          :visible="PhoneshowVisible"-->
      <!--          width="30%"-->
      <!--      >-->
      <!--        <el-form :model="PhoneForm">-->
      <!--          <el-form-item label="申请退款手机号:" label-width="120px">-->
      <!--            <el-input v-model="PhoneForm.messagePhoneRefund" autocomplete="off"></el-input>-->
      <!--          </el-form-item>-->
      <!--          <el-form-item label="挑战申请手机号:" label-width="120px">-->
      <!--            <el-input v-model="PhoneForm.messagePhoneApply" autocomplete="off"></el-input>-->
      <!--          </el-form-item>-->
      <!--          <el-form-item label="缴费记录手机号:" label-width="120px">-->
      <!--            <el-input v-model="PhoneForm.messagePhonePayment" autocomplete="off"></el-input>-->
      <!--          </el-form-item>-->
      <!--        </el-form>-->
      <!--        <el-row type="flex" justify="center" style="margin-top: 20px;">-->
      <!--          <el-button size="mini" @click="PhoneshowVisible =false">取 消</el-button>-->
      <!--          <el-button size="mini" type="primary" @click="BtnPhone">确 定</el-button>-->
      <!--        </el-row>-->
      <!--      </el-dialog>-->
      <el-dialog title="编辑" :visible="showVisibleDilog" width="30%">
        <el-form>
          <el-form-item label="员工密码:" label-width="100px">
            <el-input v-model="PasswordForm.password" autocomplete="off" size="mini"></el-input>
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="center" style="margin-top: 20px;">
          <el-button size="mini" @click="showVisibleDilog = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="showEditSubmit">确 定</el-button>
        </el-row>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getStaffPage, deleteStaff, updateStaffStatus, getPhone, updatePhone, updatePassword } from '@/api/staff'
import staffadd from './components/staffadd'
import paging from '@/components/paging'

export default {
  name: 'VueAdminIndex',
  components: {
    paging,
    staffadd
  },
  data() {
    return {
      paramFrom: {
        username: null,
        page: 1,
        pageSize: 10
      },
      PasswordForm: {
        password: null,
        id: null,
      },
      dialogVisible: false,
      showVisibleDilog: false,
      PhoneForm: {
        messagePhoneRefund: null,
        messagePhoneApply: null,
        messagePhonePayment: null
      },
      PhoneshowVisible: false,
      showVisible: false,
      tableData: [
        {
          status: 0
        }
      ],
      status: 0,
      total: 0,
      // 参数
      currid: null,
      usernames: null,
      staffid: null
    }
  },

  mounted() {
    this.getStaffPageLIst()
  },

  methods: {
    async getStaffPageLIst() {
      const data = await getStaffPage(this.paramFrom)
      this.tableData = data.records
      this.total = data.total
    },
    // 后期要改
    handleSizeChange(val) {
      this.paramFrom.pageSize = val
      this.getStaffPageLIst()
    },
    handleCurrentChange(val) {
      this.paramFrom.page = val
      this.getStaffPageLIst()
    },
    // 搜索
    chaBTn() {
      clearTimeout(this.timer) // 清理上一次的定时器
      this.timer = setTimeout(() => {
        this.paramFrom.page = 1
        this.getStaffPageLIst()
      }, 1000)
    },
    // 启用
    async qiBtn(row) {
      // console.log(row,'row');
      if (!row) return this.$message.error('参数有误')
      this.$confirm('你确定要启用吗?', '启用', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await updateStaffStatus({ id: row.id, status: 1 })
        this.showVisible = false
        this.$message({
          type: 'success',
          message: '启用成功'
        })
        await this.getStaffPageLIst()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消启用'
        })
      })
    },
    // 禁用
    async qinBtn(row) {
      // console.log(row,'row');
      if (!row) return this.$message.error('参数有误')

      this.$confirm('你确定要禁用吗?', '禁用', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await updateStaffStatus({ id: row.id, status: 0 })
        await this.getStaffPageLIst()
        this.$message({
          type: 'success',
          message: '禁用成功'
        })
        await this.getStaffPageLIst()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消禁用'
        })
      })
    },
    // 编辑
    async editBtn(row) {
      // console.log();
      this.currid = row.id
      this.showVisibleDilog = true
      this.PasswordForm.id = row.id
      // await this.$nextTick(() => {
      //   this.$refs.staffadd.getDetail(row.id)
      // })
    },
    // 删除
    delBtn(row) {
      this.staffid = row.id
      this.usernames = row.username
      this.showVisible = true
    },
    // 添加员工
    btnOK() {
      this.dialogVisible = true
    },
    // 取消
    handleClose() {
      this.showVisible = false
    },
    async delBtnOK() {
      console.log('this.staffid', this.staffid)
      this.$confirm('你确定要删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await deleteStaff(this.staffid)
        this.showVisible = false
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        // this.showVisible = false
        await this.getStaffPageLIst()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // /**
    //  * @author 焦延龙 <19131965027@163.com>
    //  * @description 打开短信通知弹出框
    //  * @date
    //  */
    // async Phone() {
    //   this.PhoneForm = await getPhone()
    //   this.PhoneshowVisible = true
    // },
    // /**
    //  * @author 焦延龙 <19131965027@163.com>
    //  * @description 确认修改短信通知的手机号
    //  * @date
    //  */
    // async BtnPhone() {
    //   await updatePhone(this.PhoneForm)
    //   this.PhoneshowVisible = false
    // },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description 确认修改员工密码
     * @date
     */
    async showEditSubmit() {
      await updatePassword(this.PasswordForm)
      this.showVisibleDilog = false
      this.$message.success('修改成功')
    }
  }
}
</script>

<style lang="scss" scoped></style>
